<template>
	<view class="content">
		<view class="result-desc">需支付金额:</view>
		<view class="result">
			<text style="font-size: 38rpx">￥</text>
			<text>{{ money }}</text>
		</view>
		<navigator hover-class="none" class="link" :url="`/pagesA/my/order/list`">
			查看报名>
		</navigator>
		<view class="main">
			<text class="main-tlt">选择支付方式</text>
			<u-cell
				icon="weixin-circle-fill"
				iconStyle="color:#0db453;font-size:40rpx;margin-right:8rpx;"
				title="微信支付"
				:border="false"
			>
				<u-icon name="checkmark-circle-fill" color="#1c965c" size="24" slot="right-icon"></u-icon>
			</u-cell>
		</view>
		<view class="btn">
			<u-button
				type="success"
				throttleTime="2000"
				color="#149d5a"
				customStyle="width：100%;"
				@click="useWxPay"
				text="立即支付"
			></u-button>
		</view>
	</view>
</template>

<script>
const app = getApp()
import { appid } from '@/js/config/index.js'
import { loginHandle } from '@/utils/mpWx.js'
export default {
	data() {
		return {
			type: '',
			id: '',
			money: 0,
			isLock: false
		}
	},
	onLoad(options) {
		this.raceId = options.raceId
		this.money = options.money
	},
	methods: {
		async useWxPay() {
			if (this.isLock) return
			this.isLock = true
			const openid = await loginHandle()
			this.$https(
				true,
				'post',
				{
					url: '/order/order/pay',
					data: {
						openId: openid,
						raceId: this.raceId
					}
				},
				(res) => {
					console.log(res)
					uni.requestPayment({
						provider: 'wxpay',
						appId: appid,
						timeStamp: res.data.timeStamp, //当前的时间
						nonceStr: res.data.nonceStr, //随机字符串
						package: 'prepay_id=' + res.data.prepayId,
						signType: 'MD5', //签名算法，暂支持 MD5。
						paySign: res.data.paySign, //签名
						success: (pay) => {
							uni.$u.toast('报名成功！')
							setTimeout(() => {
								uni.redirectTo({
									url: '/pagesA/sign/payResult?type=success'
								})
								this.isLock = false
							}, 1500)
						},
						fail: (error) => {
							console.log('失败', error)
							uni.$u.toast('支付失败，请重试！')
							setTimeout(() => {
								uni.redirectTo({
									url: '/pagesA/sign/payResult?type=fail'
								})
								this.isLock = false
							}, 2000)
						}
					})
				},
				(error) => {
					setTimeout(() => {
						this.isLock = false
					}, 1000)
				}
			)
		}
	}
}
</script>

<style lang="scss" scoped>
.result {
	font-size: 80rpx;
	color: #222;
	font-weight: 600;
	text-align: center;
	margin-bottom: 26rpx;
	&-desc {
		width: 80%;
		margin: 50rpx auto 36rpx;
		text-align: center;
		font-size: 26rpx;
		color: #666;
	}
}
.link {
	text-align: center;
	font-size: 26rpx;
	color: #0071c5;
}
.main {
	margin: 100rpx 28rpx 100rpx;
	background-color: #fff;
	border-radius: 8rpx;
	padding-bottom: 8rpx;
	&-tlt {
		font-size: 28rpx;
		padding: 26rpx 32rpx 20rpx;
		margin-bottom: 8rpx;
		display: block;
		border-bottom: 1px solid #eff2f3;
	}
}
.btn {
	width: 680rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	border-radius: 8rpx;
	font-size: 32rpx;
	color: #fff;
	margin: 0 auto 30rpx;
}
</style>
